<template>
    <div>
      <dir v-if="!utils.isMobile()" class="home-lang pc" @click.stop>
        <div class="home-lang-box" @click="showSelect = !showSelect">
          <img style="width: 27px;margin-right: 3px;float: left;margin-left: 4px;margin-top: 3px;" :src="langList[activeLang].src" alt="">
          <span style="font-size: 16px;margin-left: 6px;">{{langList[activeLang].name}}</span>
          <img src="../../assets/common-icon-select.png" :class="showSelect?'':'activeSel'" style="width: 21px;float: right;margin-top: 9px;margin-right: 12px;" alt="">
        </div>
        <div class="home-sel-lang" v-if="!showSelect">
          <div v-for="(val,index) in langList" style="width: 100%;height: 41px;" @click="langCli(val.lang,index)">
            <img style="width: 27px;margin-right: 3px;float: left;" :src="val.src" alt="">
            <span style="font-size: 16px;margin-left: 6px;">{{val.name}}</span>
          </div>
        </div>
      </dir>
      <dir v-else class="home-lang mobile" @click.stop>
        <div class="home-lang-box" @click="showSelect = !showSelect">
          <img style="width: 27px;margin-right: 2px;float: left;margin-left: 2px;margin-top: 2px;" :src="langList[activeLang].src" alt="">
          <span style="font-size: 16px;margin-left: 1px;position: relative;top: -2px;">{{langList[activeLang].name}}</span>
          <img src="../../assets/common-icon-select.png" :class="showSelect?'':'activeSel'" style="width: 16px;float: right;margin-top: 10px;margin-right: 6px;" alt="">
        </div>
        <div class="home-sel-lang" v-if="!showSelect">
          <div v-for="(val,index) in langList" style="width: 100%;height: 30px;display:flex;align-items:center;" @click="langCli(val.lang,index)">
            <img style="width: 27px;margin-right: 2px;float: left;" :src="val.src" alt="">
            <span style="font-size: 12px;margin-left: 13px;">{{val.name}}</span>
          </div>
        </div>
      </dir>
    </div>
  </template>
  
  <script>
  export default {
    name: 'newbestLanguage',
    data () {
      return {
        showSelect:true,
        langList:[
            {lang:'zh',name:'CN',src:require('../../assets/lan-icon-cn.png')},
            {lang:'en',name:'EN',src:require('../../assets/lan-icon-en.png')},
            // {lang:'ko',name:'KO',src:'../../assets/img/ko.png'},
            // {lang:'jp',name:'JA',src:'../../assets/img/jp.png'},
            // {lang:'es',name:'ES',src:'../../assets/img/es.png'},
        ],
        activeLang:1,
      }
    }, 
    components:{
        
    }, 
    mounted() {
      var body = document.getElementById('app');
      var that = this;
      body.addEventListener('click', function(e) {
        that.showSelect = true;
      })
      this.$i18n.locale = 'en';
    },
    methods: {
      _isMobile() {
        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
        return flag;
      },
      langCli(str,num){
        this.showSelect = true;
        this.activeLang = num;
        this.$i18n.locale = str;
      }
    },
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
      .home-lang.pc{
  display: inline-block;
  position: relative;
  width: 143px;
  cursor: pointer;
  float: right;
  margin-top: 2px;
  padding:0px;
}
.pc .home-lang-box{
  display: inline-block;
  position: relative;
  width: 140px;
  height: 41px;
  line-height: 37px;
  background-color: rgba(0,0,0,0);
  border-radius: 20px;
  padding: 1px 4px;
}
.pc .home-sel-lang{
  width: 140px;
  position: absolute;
  top: 45px;
  left: 2px;
  background-color: #1C1C1C;
  border-radius: 8px;
  padding: 8px 6px;
  line-height: 35px;
  font-size: 16px;
}

    .home-lang.mobile{
  display: inline-block;
  position: relative;
  width: 143px;  
  height: 10px;
  cursor: pointer;
  float: right;
  margin-top: 2px;
  padding:0px;
}
.mobile .home-lang-box{
  display: inline-block;
  position: relative;
  width: 140px;
  height: 41px;
  line-height: 37px;
  background-color: rgba(0,0,0,0);
  border-radius: 20px;
  padding: 1px 4px;
}
.mobile .home-sel-lang{
  width: 140px;
  position: absolute;
  top: 45px;
  left: 2px;
  background-color: #1C1C1C;
  border-radius: 8px;
  padding: 8px 6px;
  line-height: 35px;
  font-size: 16px;
}
  </style>
  